<template>
  <div id="recommend">
    <img src="https://image.10street.cn/image/37/1e/371ea4460c5862f088a11b494aad839f.png" alt="" class="titleimg">
    <ul>
      <li v-for="item in recommend_data.itemData" :key ='item.commonId' v-on:click='todetail(item.commonId)'>
        <img :src="item.imageUrl" alt="">
        <p class="name">{{ item.goodsName }}</p>
        <p class="price">￥{{ item.goodsPrice }}</p>
        <p class="vip_price"> 会员价: <span>￥{{ item.vipPrice }}</span></p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['recommend_data'],
  methods: {
    todetail(index){
      this.$emit('commonId',index)
    }
  },
}
</script>
<style lang='stylus' scoped>
#recommend
  background #fff
  .titleimg
    width 100%
  ul
    display flex
    flex-wrap wrap
    margin-top 0.12rem
    overflow scroll
    li
      width 33.3%
      padding-left 0.125rem
      padding-right 0.125rem
      margin-bottom 0.11rem
      p
        padding-left 0.05rem
        padding-right 0.05rem
      img
        border-radius 0.05rem
        width 1rem
        height 1rem
      .name
        font-size 0.12rem
        margin-top 0.11rem
        margin-bottom 0.04rem
        overflow hidden
        white-space nowrap
      .price
        font-size 0.12rem
        margin-bottom  0.04rem
      .vip_price
        font-size 0.12rem
        span
          font-weight  600
          color red

</style>